// 横屏结算页面
class GameOverPage {
  constructor(canvas, ctx, gameManager, api, rootImgUrl) {
    this.canvas = canvas;
    this.ctx = ctx;
    this.gameManager = gameManager;
    this.api = api
    this.rootImgUrl = rootImgUrl
    this.tipsIcon = wx.createImage();
    this.earnIcon = wx.createImage();
    this.mainBg = wx.createImage();
    this.saveAlbumIcon = wx.createImage();
    this.showIcon = wx.createImage();
    this.againIcon = wx.createImage();
    this.backIcon = wx.createImage();
  }

  onEnter() {
    this.loadResources()
    console.log('进入横屏结算页面');
  }

  onLeave() {
    console.log('离开结算页面');
  }

  update() {
    // 结算页面的更新逻辑
  }

  loadResources() {
    // 右边提示图片
    this.tipsIcon.src = this.rootImgUrl + 'tips.png';
    // 左边提示图片
    this.earnIcon.src = this.rootImgUrl + 'earnIcon.png';
    // 背景图
    this.mainBg.src = this.rootImgUrl + 'recordBg.png';
    // 保存图片按钮图片
    this.saveAlbumIcon.src = this.rootImgUrl + 'buyIcon.png';
    // 炫耀一下图片按钮
    this.showIcon.src = this.rootImgUrl + 'showIcon.png';
    // 再来一局按钮图片
    this.againIcon.src = this.rootImgUrl + 'againIcon.png';
    // 加载返回按钮图标
    this.backIcon.src = this.rootImgUrl + 'backIcon.png';

    // 资源加载完成后开始渲染
    let loadedCount = 0;
    const totalResources = 7;

    const checkLoaded = () => {
      loadedCount++;
      if (loadedCount === totalResources) {
        this.render();
      }
    };

    this.tipsIcon.onload = checkLoaded;
    this.mainBg.onload = checkLoaded;
    this.earnIcon.onload = checkLoaded;
    this.saveAlbumIcon.onload = checkLoaded;
    this.showIcon.onload = checkLoaded;
    this.againIcon.onload = checkLoaded;
    this.backIcon.onload = checkLoaded;
  }

  render() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    // 横屏主页面背景
    this.ctx.drawImage(this.mainBg, 0, 0, this.canvas.width, this.canvas.height);
    // 返回按钮
    this.ctx.drawImage(this.backIcon, 78, 28, 28, 42);

    // 标题文字
    this.ctx.fillStyle = '#505E91';
    this.ctx.font = '52px Microsoft YaHei-Regular';
    this.ctx.textAlign = 'center';
    this.ctx.textBaseline = 'top';
    this.ctx.fillText('战绩榜', this.canvas.width / 2, 30);

    this.ctx.drawImage(this.earnIcon, 28, 246, 338, 286);
    this.ctx.drawImage(this.tipsIcon, 1300, 150, 150, 150);

    // 绘制各个部分
    this.drawCenterAmount();
    this.drawButtons();
  }

  // 绘制原始形状
  drawOriginal(color, width, height, x, y, offset) {
    // 设置填充颜色
    this.ctx.fillStyle = color;
    // 开始绘制路径
    this.ctx.beginPath();
    // 定义不规则四边形的四个顶点
    // 左上角
    this.ctx.moveTo(x + offset, y);
    // 右上角（向右偏移）
    this.ctx.lineTo(width + x + offset, y);
    // 右下角（向左偏移，形成斜边）
    this.ctx.lineTo(width + x, y + height);
    // 左下角
    this.ctx.lineTo(x, y + height);
    // 闭合路径
    this.ctx.closePath();
    // 填充形状
    this.ctx.fill();
  }

  // 绘制中间收益金额区域
  drawCenterAmount() {
    const centerX = 250;
    const centerY = 160;

    this.drawOriginal('#1e3a5f', 660, 94, 512, 158, 25)

    // 金额数字
    this.ctx.fillStyle = '#FB6F6E';
    this.ctx.textAlign = 'center';
    this.ctx.textBaseline = 'top';
    this.ctx.font = 'bold 60px Microsoft YaHei';
    this.ctx.fillText('13,250.00', this.canvas.width / 2 + 30, 180);

    this.drawOriginal('#1F203F', 648, 50, 512, 272, 12)
    this.drawOriginal('#1F203F', 648, 50, 512, 342, 12)
    this.drawOriginal('#1F203F', 648, 50, 512, 412, 12)
    this.drawOriginal('#1F203F', 648, 50, 512, 482, 12)

    const rightX = 550;
    const rightY = 285;

    // 详细信息
    const details = [
      { label: '时间', value: '2009.02.25-2010.02.25' },
      { label: '股票', value: '贵州茅台' },
      { label: '个人涨幅', value: '152.25%' },
      { label: '我的收益率', value: '525.25%' }
    ];

    details.forEach((item, index) => {
      const y = rightY + index * 70;

      // 标签
      this.ctx.fillStyle = '#FFFFFF';
      this.ctx.font = '28px Microsoft YaHei-Regular';
      this.ctx.textAlign = 'left';
      this.ctx.fillText(item.label, rightX - 10, y);

      // 值
      this.ctx.fillStyle = '#C7BD91';
      this.ctx.font = '28px Microsoft YaHei-Regular';
      this.ctx.textAlign = 'right';
      this.ctx.fillText(item.value, rightX + 580, y);
    });
  }

  // 绘制底部按钮
  drawButtons() {
    const buttonY = 588;
    const buttonTextY = 618;
    const buttonWidth = 239;
    const buttonHeight = 88;

    this.ctx.drawImage(this.saveAlbumIcon, 376, buttonY, buttonWidth, buttonHeight);
    this.ctx.drawImage(this.showIcon, 738, buttonY, buttonWidth, buttonHeight);
    this.ctx.drawImage(this.againIcon, 1082, buttonY, buttonWidth, buttonHeight);

    this.ctx.fillStyle = '#ffffff';
    this.ctx.font = '32px Microsoft YaHei-Regular';
    this.ctx.textAlign = 'left';
    this.ctx.textBaseline = 'top';
    this.ctx.fillText('保存相册', 419, buttonTextY);
    this.ctx.fillText('炫耀一下', 785, buttonTextY);
    this.ctx.fillText('再来一局', 1125, buttonTextY);
  }

  handleTouch(x, y) {
    // 检查是否点击了返回按钮
    if (x >= 39 && x <= 70 && y >= 14 && y <= 35) {
      this.gameManager.switchPage('main');
    }
  }

  handleKeyDown(e) {
    if (e.keyCode === 32) {

    }
  }
  handleTouchEnd(e) {

  }
}

export default GameOverPage;